<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
	<link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- 富文本编辑器 -->
	<script charset="utf-8" src="../plugins/umedit/ueditor.config.js"></script>
	<script charset="utf-8" src="../plugins/umedit/ueditor.all.min.js"></script>
	<script charset="utf-8" src="../plugins/umedit/lang/zh-cn/zh-cn.js"></script>
</head>

<body class="hold-transition skin-red sidebar-mini" >
<div id="app">
	<!-- 正文区域 -->
	<section class="content">
		<div class="box-body">
			<!--tab页-->
			<div class="nav-tabs-custom">
				<!--tab头-->
				<ul class="nav nav-tabs">
					<li class="active">
						<a href="#home" data-toggle="tab">商品基本信息</a>
					</li>
					<li >
						<a href="#pic_upload" data-toggle="tab">商品图片</a>
					</li>
					<li>
						<a href="#spec" data-toggle="tab" >规格</a>
					</li>
				</ul>
				<!--tab内容-->
				<div class="tab-content">
					<!--表单内容-->
					<div class="tab-pane active" id="home">
						<div class="row data-type">
							<div class="col-md-2 title">商品分类</div>
							<div class="col-md-10 data">
								<table>
									<tr>
										<td>
											<select class="form-control" @change="getCategorySel(1)" v-model="categorySel1ID" >
												<option :value="-1">请选择分类</option>
												<option :value="category.id" v-for="category in categoryList1">
													{{category.name}}
												</option>
											</select>
										</td>
										<td>
											<select class="form-control select-sm" @change="getCategorySel(2)"  v-model="categorySel2ID" >
												<option :value="-1">请选择分类</option>
												<option :value="category.id" v-for="category in categoryList2">
													{{category.name}}
												</option>
											</select>
										</td>
										<td>
											<select class="form-control select-sm" @change="getCategorySel(3)" v-model="categorySel3ID"  >
												<option :value="-1">请选择分类</option>
												<option :value="category.id" v-for="category in categoryList3">
													{{category.name}}
												</option>
											</select>
										</td>
										<td>
											模板ID:{{typeId}}
										</td>
									</tr>
								</table>
							</div>
							<div class="col-md-2 title">商品名称</div>
							<div class="col-md-10 data">
								<input type="text" v-model="goodsEntity.goods.goodsName" class="form-control" placeholder="商品名称" value="">
							</div>
							<div class="col-md-2 title">品牌</div>

							<div class="col-md-10 data">
								<select class="form-control" v-model="selectBrandId">
									<option :value="-1">请选择品牌</option>
									<option :value="brand.id" v-for="brand in brandList">
										{{brand.name}}
									</option>
								</select>
							</div>

							<div class="col-md-2 title">副标题</div>
							<div class="col-md-10 data">
								<input type="text" v-model="goodsEntity.goods.caption"  class="form-control"   placeholder="副标题" value="">
							</div>

							<div class="col-md-2 title">价格</div>
							<div class="col-md-10 data">
								<div class="input-group">
									<span class="input-group-addon">¥</span>
									<input type="text" v-model="goodsEntity.goods.price" class="form-control"  placeholder="价格" value="">
								</div>
							</div>

							<div class="col-md-2 title editer">商品介绍</div>
							<div class="col-md-10 data editer">
								<div id="editor" name="article_content" style="width:1337px; height: 320px;"></div>
							</div>

							<div class="col-md-2 title rowHeight2x">包装列表</div>
							<div class="col-md-10 data rowHeight2x">
								<textarea rows="4"   class="form-control"   placeholder="包装列表"></textarea>
							</div>

							<div class="col-md-2 title rowHeight2x">售后服务</div>
							<div class="col-md-10 data rowHeight2x">
								<textarea rows="4"  class="form-control"    placeholder="售后服务"></textarea>
							</div>

						</div>
					</div>
					<!--图片上传-->
					<div class="tab-pane" id="pic_upload">
						<div class="row data-type">
							<!-- 颜色图片 -->
							<div class="btn-group">
								<button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>
							</div>
							<table class="table table-bordered table-striped table-hover dataTable">
								<thead>
								<tr>
									<th class="sorting">颜色</th>
									<th class="sorting">图片</th>
									<th class="sorting">操作</th>
								</tr>
								</thead>
								<tbody>
								<tr v-for="(imgItem,index) in imgList">
									<td>{{imgItem.color}}</td>
									<td>
										<img alt="" :src="imgItem.url" width="100px" height="100px">
									</td>
									<td>
										<button type="button" class="btn btn-default" title="删除" @click="delImg(imgItem.url,index)"  ><i class="fa fa-trash-o"></i> 删除</button>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
					<!--规格-->
					<div class="tab-pane" id="spec">
						<div class="row data-type">
							<div class="col-md-2 title">是否启用规格</div>
							<div class="col-md-10 data">
								<input type="checkbox" >
							</div>
						</div>
						<p>
						<div>
							<div class="row data-type">

								<div v-for="specItem in specList">
									<div class="col-md-2 title">{{specItem.spec_name}}</div>
									<div class="col-md-10 data">
									<span v-for="option in specItem.option">
										<input  type="checkbox" :checked="checkAttributeValue(specItem.spec_name,option.optionName)"  @click="updateSpecStatus($event,specItem.spec_name,option.optionName)">{{option.optionName}}
									</span>

									</div>
								</div>

							</div>
							<div class="row data-type">
								<table class="table table-bordered table-striped table-hover dataTable">
									<thead>
									<tr>
										<th v-for="spec in specSelItems" class="sorting">{{spec.specName}}</th>
										<th class="sorting">价格</th>
										<th class="sorting">库存</th>
										<th class="sorting">是否启用</th>
										<th class="sorting">是否默认</th>
									</tr>
									</thead>
									<tbody>
									<tr v-for="item in itemList">
										<td v-for="spec in specSelItems">{{item.spec[spec.specName]}} </td>

										<td><input class="form-control"  placeholder="价格"></td>
										<td><input class="form-control" placeholder="库存数量"></td>
										<td><input type="checkbox" ></td>
										<td><input type="checkbox" ></td>
									</tr>

									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="btn-toolbar list-toolbar">
			<button class="btn btn-primary"  @click="saveGoods()">
				<i class="fa fa-save"></i>保存
			</button>
			<button class="btn btn-default" >返回列表</button>
		</div>
	</section>
	<!-- 上传窗口 -->
	<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" >
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="myModalLabel">上传商品图片</h3>
				</div>
				<div class="modal-body">
					<table class="table table-bordered table-striped">
						<tr>
							<td>颜色</td>
							<td><input  v-model="currngImg.color" class="form-control" placeholder="颜色" ></td>
						</tr>
						<tr>
							<td>图片</td>
							<td>
								<table>
									<tr>
										<td>
											<input   type="file" id="file" />
											<button class="btn btn-primary" type="button" style="margin-top: 10px;" @click="uploadFile()">上传</button>
										</td>
										<td>
											<img :src="currngImg.url"  width="200px" height="200px" alt=""/>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</div>
				<div class="modal-footer">
					<button class="btn btn-success"  data-dismiss="modal" aria-hidden="true" @click="saveImage()">保存</button>
					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
				</div>
			</div>
		</div>
	</div>
</div>

</body>

<script type="text/javascript" src="../plugins/vue/vuejs-2.5.16.js"></script>
<script type="text/javascript" src="../plugins/vue/axios-0.18.0.js"></script>
<script type="text/javascript" src="../js/goods.js"></script>

<script type="text/javascript">
	//初始化富文本编程器
	var ue = UE.getEditor('editor');

	ue.ready(function() {
		UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
		UE.Editor.prototype.getActionUrl = function (action) {
			if (action == 'upload/uploadImage.do') {
				return  "http://localhost:8083/upload/uploadImage.do";
			} else {
				return this._bkGetActionUrl.call(this, action);
			}
		};
	});


</script>



</html>